<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no">
    <title>数字尾巴 | 分享美好数字生活</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3027260_z5t4fxs0js.css">
    <link rel="stylesheet" href="./css/clearSure.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/nav.css">
    <meta name="referrer" content="no-referrer">
</head>

<body>
    <div class="content">
        <div class="nav_bg">
            <header>
                <div class="logo_img">
                    <img src=""
                        alt="">
                </div>
                <a href="#">
                    下载 APP
                </a>
                <div class="search">
                    <i class="iconfont icon-sousuoleimu"></i>
                </div>
            </header>
        </div>
        <div class="swiper_bg">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2021/12/15/36902202112151824527948.jpeg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2021/12/17/b9e8f202112171544395970.jpeg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2021/12/16/bebad202112161714028236.jpeg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2021/12/16/cca38202112161713378000.jpeg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2021/12/16/6269f202112161713101178.jpeg" alt="">
                    </div>

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="page_content">
            <div class="page">
                <div class="page_user">
                    <div class="user_img">
                        <img src="https://s1.dgtle.com/dgtle_img/user/2020/10/12/ddee7202010121359128174.jpeg?imageView2/2/w/100/q/100/format/jpg" alt="">
                    </div>
                    <p class="user_name">
                        FEiiii
                    </p>
                </div>
                <div class="page_moreImg">
                    <div class="more_img">
                        <img src="https://s1.dgtle.com/dgtle_img/ins/2021/12/19/a4785202112191343225435_1800_500.jpg?imageView2/2/w/600/q/100/format/jpg" alt="">
                    </div>
                    <div class="more_img">
                        <img src="https://s1.dgtle.com/dgtle_img/ins/2021/12/19/c05b220211219134322664_1800_500.jpg?imageView2/2/w/600/q/100/format/jpg" alt="">
                    </div>
                    <div class="more_img last_img" style="margin-right: 0;">
                        <img src="https://s1.dgtle.com/dgtle_img/ins/2021/12/19/a3005202112191343228482_1800_500.jpg?imageView2/2/w/600/q/100/format/jpg" alt="">
                        <span class="img_num">9</span>
                    </div>
                </div>
                <div class="page_text">
                    <p>扎囊沙漠公园雅江边 应该是河沙吹起聚成的褪去夏天的颜色 显得更荒了荒得寂静</p>
                </div>
                <div class="page_bottom">
                    <img src=""
                        alt="" class="like">
                    <span class="like_content">9</span>
                    <img src=""
                        alt="" class="img_common">
                    <span class="common"></span>
                    <span class="time">23分钟前|动态</span>
                </div>
            </div>
            <div class="newsletterBar">
                <div class="block_top">
                    <div class="block_left">
                        <img src="https://s1.dgtle.com/dgtle_img/news/2021/12/20/9e913202112201408277106.png?imageView2/2/w/960/q/100/format/jpg" alt="">
                    </div>
                    <div class="block_right">
                        <div class="block_right_title">
                            vivo WATCH 2 将内置网易云音乐、喜马拉雅，7 天通信续航
                        </div>
                        <div class="block_right_content">
                            今日，vivo 表示，vivo WATCH 2 内置网易云音乐、喜马拉雅，“把万千好歌与海量有声...
                        </div>
                    </div>
                </div>
                <div class="block_bottom">
                    <img src=""
                        alt="" class="like">
                    <span class="like_content">9</span>
                    <img src=""
                        alt="" class="img_common">
                    <span class="common"></span>
                    <span class="time">23分钟前|资讯</span>
                </div>
            </div>
        </div>
    </div>
    <div class="switch">
        <div class="header_search">
            <div class="search_ipt">
                <i class="iconfont icon-search-copy"></i>
                <input type="text" placeholder="iPhone X">
            </div>
            <div class="header_close">
                <i class="iconfont icon-error"></i>
            </div>
        </div>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./comment.html">
                    <img src="./img/comment.png" alt="">
                    <p>点评</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./article.html">
                    <img src="./img/article.png" alt="">
                    <p>文章</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./news.html">
                    <img src="./img/news.png" alt="">
                    <p>鲸闻</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./evaluating.html">
                    <img src="./img/test.png" alt="">
                    <p>众测</p>
                </a>
            </li>
        </ul>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./activity.html">
                    <img src="./img/activity.png" alt="">
                    <p>活动</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./aside.html">
                    <img src="./img/lie.png" alt="">
                    <p>闲置</p>
                </a>
            </li>
            <li class="header-module">
                <a href="">
                    <img src="./img/recycling.png" alt="">
                    <p>手机回收</p>
                </a>
            </li>
            <li class="header-module">
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
        <div class="line"></div>
        <div class="header_login">
            <a href="">登录</a>
        </div>
    </div>
    <div class="app">
        <div class="openInApp">APP内打开</div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/font-size.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="baseurl.js"></script>

    <script>
        // 请求数据
        window.onload = () => {

            let content = document.querySelector('.page_content')
            myget('/index').then(res => {
                let str = ''
                res.data.data.forEach((item, index) => {
                    if (item.talk == null) {
                        item.talk = ''
                    }
                    if (item.img1 != null) {
                        str += `
                  <div class="page">
                <div class="page_user">
                    <div class="user_img">
                        <img src="${item.user_img}" alt="">
                    </div>
                    <p class="user_name">
                        ${item.user_name}
                    </p>
                </div>
                <div class="page_moreImg">
                    <div class="more_img">
                        <img src="${item.img1}" alt="">
                    </div>
                    <div class="more_img">
                        <img src="${item.img2}" alt="">
                    </div>
                    <div class="more_img last_img" style="margin-right: 0;">
                        <img src="${item.img3}" alt="">
                        <span class="img_num">${item.img_num}</span>
                    </div>
                </div>
                <div class="page_text">
                    <p>${item.publish_text}</p>
                </div>
                <div class="page_bottom">
                    <img src=""
                        alt="" class="like">
                    <span class="like_content">${item.like}</span>
                    <img src=""
                        alt="" class="img_common">
                    <span class="common">${item.talk}</span>
                    <span class="time">${item.publish_time}</span>
                </div>
            </div>
                  `
                    }
                })
                content.innerHTML = str
            }).catch(err => {
                console.log(err);
            })

        }

        // 轮播
        var mySwiper = new Swiper('.swiper', {
                direction: 'horizontal', // 垂直切换选项
                slidesOffsetAfter: 100,
                slidesPerView: 1.2,
                spaceBetween: 20,
                centeredSlides: true,
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
            // 搜索切换
        $('.search').click(() => {
            $('.content').css({
                'display': ' none'
            })
            $('.switch').css({
                'display': 'block'
            })
            $('body').css({
                'background': '#fff'
            })
        })
        $('.header_close').click(() => {
            $('.content').css({
                'display': ' block'
            })
            $('.switch').css({
                'display': 'none'
            })
            $('body').css({
                'background': '#f5f5f5'
            })
        })
        document.querySelector('.content .logo_img').onclick = () => {
            location.href = 'index.html'
        }
    </script>
</body>

</html>